<template>
  <div class="search">
    <div class="search-box-wrapper">
      <v-search @query="searchContent" :query="query"></v-search>
    </div>
    <div class="search-result" v-show="query">
      <v-suggest :query="query" @playMusic="playMusic"></v-suggest>
    </div>

    <!-- 热门搜索、搜索记录 -->

    <div class="shortcut-wrapper" v-show="!query">
      <v-scroll class="shortcut">
        <div>
          <div class="hot-key">
            <h1 class="title">热门搜索</h1>
            <ul>
              <li class="item" v-for="(item, index) in hotKey" :key="index">
                <span @click="clickHotKey(item.first)">{{ item.first }}</span>
              </li>
            </ul>
          </div>

          <div class="search-history">
            <h1 class="title">
              <span class="text">搜索记录</span>
              <span class="clear" @click="clearAllHistory"
                ><i class="icon">&#xe612;</i></span
              >
            </h1>

            <v-searchlist
              :searchs="searchHistory"
              @clickHistory="clickHistory"
            ></v-searchlist>

            <!-- 历史记录 -->
          </div>
        </div>
      </v-scroll>
    </div>
  </div>
</template>

<script>
import scroll from "@/components/scroll.vue";
import searchBoxVue from "../components/searchBox.vue";
import suggest from "@/components/suggest.vue";
import api from "@/api";
import { mapGetters } from "vuex";
import { mapActions } from "vuex";

import searchListVue from "./searchList.vue";

export default {
  components: {
    "v-search": searchBoxVue,
    "v-suggest": suggest,
    "v-scroll": scroll,
    "v-searchlist": searchListVue,
  },

  data() {
    return {
      query: "",
      hotKey: [],
    };
  },
  created() {
    this._getHotKey();
  },
  methods: {
    searchContent(e) {
      this.query = e.trim();
      // this.$store.dispatch("savaHistory", this.query);
    },
    saveSearch() {
      this.saveHistory(this.query);
    },
    ...mapActions(["saveHistory", "setPlaySong"]),
    _getHotKey() {
      api.HotSearchKey().then((res) => {
        this.hotKey = res.data.result.hots.slice(0, 10);
      });
    },
    clearAllHistory() {
      this.$store.dispatch("clearHistory");
    },
    clickHotKey(hotKey) {
      this.query = hotKey;
    },
    playMusic(song) {
      this.saveSearch();
      this.setPlaySong(song);
      // this.$store.dispatch("setPlaySong", song);
      console.log("父组件：", song);
    },
    clickHistory(item) {
      this.query = item;
    },
  },
  computed: {
    ...mapGetters(["searchHistory"]),
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/function.less";
.search {
  overflow: hidden;
  .search-box-wrapper {
    .px2rem(margin, 40);
  }
  .shortcut-wrapper {
    position: fixed;
    .px2rem(top, 360);
    bottom: 0;
    width: 100%;
    .shortcut {
      height: 100%;
      overflow: hidden;
      .hot-key {
        .px2rem(margin-right, 40);
        .px2rem(margin-bottom, 40);
        .px2rem(margin-left, 40);
        .title {
          .px2rem(margin-bottom, 40);
          font-size: 14px;
          color: hsla(0, 0%, 100%, 0.5);
        }
        .item {
          display: inline-block;
          .px2rem(padding-top, 10);
          .px2rem(padding-bottom, 10);
          .px2rem(padding-left, 20);
          .px2rem(padding-right, 20);
          .px2rem(margin-right, 20);
          .px2rem(margin-bottom, 20);
          border-radius: 6px;
          background: rgba(16, 48, 61, 0.9);
          font-size: 14px;
          color: rgba(201, 201, 201, 0.863);
        }
      }
      .search-history {
        position: relative;
        .px2rem(margin-left, 40);
        .px2rem(margin-right, 40);
        .title {
          display: flex;
          align-items: center;
          .px2rem(height, 80);
          font-size: 14px;
          color: hsla(0, 0%, 100%, 0.5);
          .text {
            flex: 1;
          }
          .clear {
            // extend-click()
            .icon {
              font-size: 18px;
              color: hsla(0, 0%, 100%, 0.3);
            }
          }
        }
      }
    }
  }
  .search-result {
    position: fixed;
    width: 100%;
    .px2rem(top, 360);
    bottom: 0;
  }
}
</style>
